<!--
 * @Description:
 * @Author: sunye
 * @Date: 2022-02-11 17:57:07
 * @LastEditTime: 2022-02-15 10:05:41
-->
<template>
  <div id="myChart3" style="width: 100%; height: 100%"></div>
</template>

<script>
import { trend } from 'api/home.js'

export default {
  name: 'card',
  data () {
    return {
      trendCountry: [],
      dataList: {
        mins: [],
        indoor: [],
        outdoor: []
      }
    }
  },
  async mounted () {
    this.trendCountry = await this.trend()
    this.trendCountry.forEach(i => {
      this.dataList.mins.push(i.CREATED_TIME)
      this.dataList.indoor.push((i.indoor).toFixed(2))
      this.dataList.outdoor.push(((+i.comprehensive * 12 - i.indoor * 3) / 9).toFixed(2))
    })
    this.drawLine()
  },
  methods: {
    trend () {
      return trend().then(res => {
        // console.log(res.result)
        return res.result
      })
    },
    drawLine () {
      let myChart = this.$echarts.init(document.getElementById('myChart3'))

      let option = {
        legend: [
          {
            data: ['室外', '室内'],
            icon: 'circle',
            itemWidth: 8,
            itemHeight: 8,
            // itemStyle: {
            //   padding: 10
            // },
            textStyle: {
              color: '#BAE5E8'
            }
          }
        ],
        grid: {
          y: 38,
          y2: 32,
          x: 48,
          x2: 32,
          tooltip: {
            show: true
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#BAE5E8'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(68, 241, 255, 0.15)'
            }
          },
          data: this.dataList.mins
        },
        yAxis: {
          type: 'value',
          max: 'dataMax',
          axisLabel: {
            color: '#BAE5E8'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(68, 241, 255, 0.15)'
            }
          }
        },
        series: [{
          name: '室外',
          type: 'line',
          stack: 'x',
          data: this.dataList.outdoor
        },
        {
          name: '室内',
          type: 'line',
          stack: 'x',
          data: this.dataList.indoor
        }
        ],
        color: ['rgba(255, 210, 0, 1)', 'rgba(0, 255, 204, 1)']
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }

}
</script>
